<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="chrome=1"/> 
		<title>DojoX Charting Theme Previewer</title>
		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			body {
				padding: 1.5em;
			}
			div.container {
				position: relative;
				width: 180px;
				height: 200px;
				float: left;
				border: 1px solid #ccc;
				margin: 12px;
			}
			div.container div.chart {
				width: 180px;
				height: 180px;
			}
			div.container div.title {
				position: absolute;
				bottom: 4px;
				font-size: 11px;
				width: 180px;
				text-align: center;
			}
			div.container div.title a { text-decoration: none; }
			div.container div.title a:hover { text-decoration: underline; }
		</style>
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug: false, async: true, gfxRenderer: 'svg,silverlight,vml,canvas'"></script>
<script type="text/javascript">
	require(["dojo/_base/array", "dojo/dom-construct", "dojo/ready",  
		"dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/gfx/_base"], 
		function(arr, domConstruct, ready, Chart, Pie, gfx){

		var themes = [
			"dojox/charting/themes/Julie", "dojox/charting/themes/ThreeD", "dojox/charting/themes/Chris", 
			"dojox/charting/themes/Tom", "dojox/charting/themes/Claro", "dojox/charting/themes/PrimaryColors", 
			"dojox/charting/themes/Electric", "dojox/charting/themes/Charged", "dojox/charting/themes/Renkoo",
			"dojox/charting/themes/Adobebricks", "dojox/charting/themes/Algae", "dojox/charting/themes/Bahamation", 
			"dojox/charting/themes/BlueDusk", "dojox/charting/themes/CubanShirts", "dojox/charting/themes/Desert", 
			"dojox/charting/themes/Distinctive", "dojox/charting/themes/Dollar", "dojox/charting/themes/Grasshopper", 
			"dojox/charting/themes/Grasslands", "dojox/charting/themes/GreySkies", "dojox/charting/themes/Harmony", 
			"dojox/charting/themes/IndigoNation", "dojox/charting/themes/Ireland", "dojox/charting/themes/MiamiNice",
			"dojox/charting/themes/Minty", "dojox/charting/themes/PurpleRain", "dojox/charting/themes/RoyalPurples", 
			"dojox/charting/themes/SageToLime", "dojox/charting/themes/Shrooms", "dojox/charting/themes/Tufte", 
			"dojox/charting/themes/WatersEdge", "dojox/charting/themes/Wetland", "dojox/charting/themes/PlotKit/blue",
			"dojox/charting/themes/PlotKit/cyan", "dojox/charting/themes/PlotKit/green", "dojox/charting/themes/PlotKit/orange", 
			"dojox/charting/themes/PlotKit/purple", "dojox/charting/themes/PlotKit/red"
		];
		
		require(themes, function(){
			var i = 0;
			var themeClasses = arguments;
			ready(function(){
				arr.forEach(themes, function(theme){
					// remove dojox/charting/themes from displayed name
					theme = theme.substring(22);
					// move / to .
					theme = theme.replace("/", ".");
					var container = domConstruct.create("div", { className: "container" }, "main");
					var chart = domConstruct.create("div", { className: "chart" }, container);
					var title = domConstruct.create("div", { 
						className: "title", 
						innerHTML: 'See more of "<a href="test_themes-amd.html?' + theme + '">' + theme + '</a>"' 
					}, container);
					var c = new Chart(chart).
						setTheme(themeClasses[i]).
						addPlot("default", {type: Pie, radius: 60, labelOffset: -20, radGrad: gfx.renderer == "vml" ? "fan" : "native"}).
						addSeries("Series A", [0.35, 0.25, 0.42, 0.53, 0.69]).
						render();
					i++;
				});
			});
		});
	});
</script>
</head>
<body>
	<h1>DojoX Charting Theme Preview</h1>
	<div id="main"></div>
</body>
</html>
